<template>
  <div class="statistics">
    <div class="title">统计概况</div>
    <div class="statistics-box">
      <div v-for="(item, index) in state.statistics" :key="index" class="item">
        <div class="item-head">{{ item.title }}</div>
        <div class="item-content">
          <p class="item-title">{{ item.count.allNumber }}</p>
          <p class="item-desc">
            <span>{{ item.desc }}</span
            ><span>{{ item.count.monthNumber }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="product-box">
      <div id="product"></div>
      <div class="entry">
        <p class="entry-title">快捷入口</p>
        <div class="entry-item-box">
          <template v-for="(item, index) in state.entry" :key="index">
            <div class="entry-items">
              <div
                class="entry-item"
                @click="toPath(item.path)"
              >
                <img class="entry-bg" :src="item.url" />
              </div>
              <span>{{ item.name }}</span>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="project-box">
      <div id="project"></div>
      <div class="browserCount-box">
        <div class="head">
          <div :class="state.active == 0 ? 'active' : ''" @click="getSDay">
            最近七天
          </div>
          <div :class="state.active == 1 ? 'active' : ''" @click="getTDay">
            最近30天
          </div>
          <div :class="state.active == 2 ? 'active' : ''" @click="getYDay">
            最近一年
          </div>
        </div>
        <div id="browserCount"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  GetStatistics,
  GetProductCount,
  GetProjectCount,
} from "@/api/statistics";
import { reactive, onMounted, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import * as echarts from "echarts";
import provider from '@/assets/navigation/provider.png'
import product from '@/assets/navigation/product.png'
import project from '@/assets/navigation/project.png'
import expert from '@/assets/navigation/expert.png'
import brand from '@/assets/navigation/brand.png'
import user from '@/assets/navigation/user.png'
import videoIcon from '@/assets/navigation/video.png'
import imgIcon from '@/assets/navigation/image.png'
import dataIcon from '@/assets/navigation/data.png'
import member from '@/assets/navigation/member.png'
import info from '@/assets/navigation/info.png'
import serve from '@/assets/navigation/serve.png'

const route = useRoute();
const router = useRouter();
const state = reactive({
  statistics: [
    {
      title: "公司数量",
      count: 0,
      desc: "本月新增公司：",
      descCount: 0,
    },
    {
      title: "项目数量",
      count: 0,
      desc: "当月新增项目：",
      descCount: 0,
    },
    {
      title: "品牌数量",
      count: 0,
      desc: "本月新增品牌量：",
      descCount: 0,
    },
    {
      title: "用户量",
      count: 0,
      desc: "本月新增量：",
      descCount: 0,
    },
  ],
  entry: [
    {
      name: "供应商管理",
      path: "/gongyingshang",
      url: provider,
    },
    {
      name: "产品管理",
      path: "/chanpin",
      url: product,
    },
    {
      name: "项目管理",
      path: "/xiangmu",
      url: project,
    },
    {
      name: "专家管理",
      path: "/zhuanjia",
      url: expert,
    },
    {
      name: "品牌管理",
      path: "/pinpai",
      url: brand,
    },
    {
      name: "用户管理",
      path: "/yonghu",
      url: user,
    },
    {
      name: "banner管理",
      path: "/banner",
      url: imgIcon,
    },
    {
      name: "资料库管理",
      path: "/ziliaoku",
      url: dataIcon,
    },
    {
      name: "会员权益",
      path: "/huiyuanquanyi",
      url: member
    },
    {
      name: "视频管理",
      path: "/shipin",
      url: videoIcon
    },
    {
      name: "服务管理",
      path: "/fuwu",
      url: serve
    },
    {
      name: "资讯管理",
      path: "/zixundongtai",
      url: info
    },
  ],
  data: {
    legendData: [],
    seriesData: [],
  },
  dates: [],
  browserCount: [],
  active: 0,
});
const getList = () => {
  GetStatistics().then((res) => {
    if (res.code == 4201) {
      state.statistics[0].count = res.data.gongyingshang;
      state.statistics[1].count = res.data.pinpai;
      state.statistics[2].count = res.data.xiangmu;
      state.statistics[3].count = res.data.yonghu;
    }
  });
  GetProductCount().then((res) => {
    if (res.code == 4201) {
      state.data = res.data;
      initChart();
    }
  });
  GetProjectCount().then((res) => {
    if (res.code == 4201) {
      state.projectData = res.data;
      initChart1();
      getSDay();
    }
  });
};
// 声明定义一下echart
let echart = echarts;

onMounted (() => {
  getList();
})

onUnmounted(() => {
  echart.dispose;
});

// 基础配置一下Echarts
function initChart() {
  let chart = echart.init(document.getElementById("product"));
  chart.setOption({
    title: {
      text: "产品数量占比TOP5",
      left: "left",
    },
    legend: {
      type: "scroll",
      orient: "vertical",
      right: 10,
      top: 20,
      bottom: 20,
      data: state.data.legendData,
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    series: [
      {
        name: "公司名称",
        type: "pie",
        radius: "55%",
        center: ['30%', '50%'],
        label: {
          position: "inner",
          fontSize: 14,
          formatter: "{c}",
        },
        labelLine: {
          show: false,
        },
        data: state.data.seriesData,
      },
    ],
  });
  window.onresize = function () {
    //自适应大小
    chart.resize();
  };
}
function initChart1() {
  let projectChart = echart.init(document.getElementById("project"));
  projectChart.setOption({
    title: {
      text: "项目数量占比TOP5",
      left: "left",
    },
    legend: {
      type: "scroll",
      orient: "vertical",
      right: 0,
      top: 20,
      bottom: 20,
      data: state.projectData.legendData,
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    series: [
      {
        name: "公司名称",
        type: "pie",
        radius: "55%",
        center: ['30%', '50%'],
        label: {
          position: "inner",
          fontSize: 14,
          formatter: "{c}",
        },
        labelLine: {
          show: false,
        },
        data: state.projectData.seriesData,
      },
    ],
  });
  window.onresize = function () {
    //自适应大小
    projectChart.resize();
  };
}
// 获取最近七天数据
const getSDay = () => {
  state.dates = [];
  state.browserCount = [];
  state.active = 0;
  for(let i = 1; i < 8; i++) {
    let date = (new Date(new Date().getTime() - i * 24 * 3600 * 1000).getMonth() + 1) + '.' + new Date(new Date().getTime() - i * 24 * 3600 * 1000).getDate()
    state.dates.push(date)
    state.browserCount.push(i);
  }
  initChart2();
};
// 获取最近30天数据
const getTDay = () => {
  state.active = 1;
  state.dates = [];
  state.browserCount = [];
  for(let i = 1; i < 31; i++) {
    let date = (new Date(new Date().getTime() - i * 24 * 3600 * 1000).getMonth() + 1) + '.' + new Date(new Date().getTime() - i * 24 * 3600 * 1000).getDate()
    state.dates.push(date)
    state.browserCount.push(i);
  }
  initChart2();
};
// 获取最近一年数据
const getYDay = () => {
  state.active = 2;
  state.dates = [];
  state.browserCount = [];
  for(let i = 1; i < 366; i++) {
    let date = (new Date(new Date().getTime() - i * 24 * 3600 * 1000).getMonth() + 1) + '.' + new Date(new Date().getTime() - i * 24 * 3600 * 1000).getDate()
    state.dates.push(date)
    state.browserCount.push(i);
  }
  initChart2();
};
function initChart2() {
  let browserCountChart = echart.init(document.getElementById("browserCount"));
  browserCountChart.setOption({
    title: {
      text: "用户访问量",
      left: "left",
    },
    xAxis: {
      type: "category",
      data: state.dates,
    },
    yAxis: {
      type: "value",
    },
    color: ["#1990FF"],
    series: [
      {
        data: state.browserCount,
        type: "bar",
      },
    ],
  });
  window.onresize = function () {
    //自适应大小
    browserCountChart.resize();
  };
}
// 快捷入口跳转
const toPath = (path) => {
  router.push({
    path,
  });
};
</script>
<style scope lang="scss">
.statistics {
  color: #333;
  background-color: #f2f2f2 !important;
  .title {
    height: 50px;
    width: 100%;
    border-radius: 5px;
    background-color: #fff;
    line-height: 50px;
    padding-left: 15px;
    color: #000;
    font-weight: bold;
  }
  .statistics-box {
    display: flex;
    justify-content: space-between;
    .item {
      margin-top: 5px;
      width: 100%;
      &:not(:first-child) {
        margin-left: 10px;
      }
      .item-head {
        background-color: #fff;
        padding: 15px;
        border-radius: 5px 5px 0 0;
      }
      .item-content {
        margin-top: 1px;
        background-color: #fff;
        padding: 25px 15px;
        border-radius: 0 0 5px 5px;
        .item-title {
          font-size: 24px;
          font-weight: bold;
        }
        .item-desc {
          display: flex;
          justify-content: space-between;
          margin-top: 25px;
        }
      }
    }
  }
  .product-box {
    margin-top: 10px;
    display: flex;
    #product {
      width: 520px;
      height: 400px;
      margin-right: 15px;
      background-color: #fff;
      border-radius: 5px;
      padding: 30px 20px 5px 20px;
    }
    .entry {
      flex: 1;
      border-radius: 5px;
      height: 435px;
      background-color: #fff;
      padding: 30px 40px;
      box-sizing: border-box;
      .entry-title {
        font-size: 18px;
        font-weight: bold;
      }
      .entry-item-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .entry-items {
          width: calc((100% - 20px) / 6);
          text-align: center;
          .entry-item {
            width: 100%;
            margin-top: 60px;
            cursor: pointer;
            margin-bottom: 15px;
            img {
              width: 60px;
              height: 60px;
            }
          }
        }
      }
    }
  }
  .project-box {
    margin-top: 10px;
    display: flex;
    #project {
      width: 520px;
      height: 400px;
      margin-right: 15px;
      background-color: #fff;
      border-radius: 5px;
      padding: 30px 20px 5px 20px;
    }
    .browserCount-box {
      flex: 1;
      border-radius: 5px;
      height: 435px;
      background-color: #fff;
      padding: 30px 40px;
      box-sizing: border-box;
      position: relative;
      .head {
        position: absolute;
        display: flex;
        z-index: 999;
        right: 60px;
        top: 30px;
        div {
          width: 55px;
          height: 35px;
          line-height: 35px;
          text-align: center;
          cursor: pointer;
          font-size: 12px;
          border: 1px solid #666;
          &:nth-child(2) {
            border-left: none;
            border-right: none;
          }
          &.active {
            color: #fff;
            background-color: #159bd5;
          }
        }
      }
      #browserCount {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
